import { useState } from "react"
import { Input } from 'antd';
import "./start-frame.less"
import { Modal, Form, message } from "antd"
import { SendReqAddFolder} from "../vo/request"
import { PlusCircleTwoTone } from '@ant-design/icons'



export function AddFolder(props:any) {
    const [Visable, setVisable] = useState(false);
    const [form] = Form.useForm();
    // const group = useContext(GroupContext);

    // const [state, setState] = useState([{
    //     groupName: " ",
    //     groupId: 0,
    // }]);
    const send = async (items: any) =>    {
        let res = await SendReqAddFolder(items);
        if(res.data){
            setVisable(false);
            message.success("创建成功！");
            props.setUpdate(Math.random());
            // let result = await requireGroupData();
            // setState(result.data);

        }else{
            setVisable(false);
            message.error("创建失败");
        }
        console.log(items);
        setVisable(false);
    }
    return (
        <span>
            <span
                onClick={
                    () => {
                        setVisable(true);
                    }
                }
            >
                <PlusCircleTwoTone twoToneColor="#141414" style={{ float: 'right', margin: '1vw' }} />
            </span>
            <Modal
                visible={Visable}
                okText={'确认'}
                cancelText="取消"
                title="新建分组"
                onCancel={() => { setVisable(false) }}
                onOk={
                    () => {
                        form
                            .validateFields()
                            .then(values => {
                                form.resetFields();
                                send(values);
                            })
                            .catch(info => {
                                console.log('Validate Failed:', info);
                            });
                    }
                }
            >
                <Form
                    form={form}
                >
                    <Form.Item
                        name="groupName"
                        label="分组名称"
                        rules={[
                            {
                                required: true,
                                message: " "
                            }
                        ]}
                    >
                        <Input placeholder="请输入分组名称" />
                    </Form.Item>
                    {/* <Form.Item name="description" label="描述">
                        <TextArea autoSize={{ minRows: 2, maxRows: 4 }} />
                    </Form.Item> */}

                </Form>

            </Modal>
        </span>

    )
}